<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{recycle.page.title}"></title>
    <script th:inline="javascript">

        const FILE_TYPE_FILE = 0
        const FILE_TYPE_FOLDER = 1
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-65 -40; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150)/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/file/queryRecycleFileListByPage}]]*/'',
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'center',
                        process: function(v,_trid,_row){
                            var html = `<div style="display: flex;width: 100px;">`
                            if(_row.fileType === FILE_TYPE_FOLDER){
                                html += `<a href="#" style="color: #f7ba2a" class="btn" onclick="enterDir('${_row.fileUuid}','${_row.filePath}')"><i class="glyphicon glyphicon-file" style="margin-right: 5px"></i><span>${v}</span></a>`
                            }else {
                                html += `<a href="#" style="color: #00b1ef" class="btn" onclick="preFile('${_row.fileUuid}','${v}')"><i class="glyphicon glyphicon-folder-close" style="margin-right: 5px"></i><span>${v}</span></a>`
                            }
                            html += `</div>`
                            return html;

                        }
                    },
                    {display : /*[[#{file.size}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{file.delete.time}]]*/"",name : 'deleteTime',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.opreation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row){
                            var html = `<div>`
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_user_mod')")}]]) {
                                html += `<a href="#" class="btn" onclick="restoreFile('${v}')" title=[[#{recycle.restore}]]><i class="glyphicon glyphicon-repeat"></i></a>`
                                html += `<a href="#" class="btn" onclick="deletePermanently('${v}')" title=[[#{recycle.delete.permanently}]]><i class="glyphicon glyphicon-trash"></i></a>`
                            }
                            html += `<div>`;
                            return html;

                        }
                    },
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                // rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });

            query();

            /**
             * 文档预览
             */
            $("#pre-document-dialog-id").dialog({
                autoOpen : false,
                width : 800,
                modal : true,
                resizable : false,
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog("close");
                        }
                    }
                ]
            })

            /**
             * 恢复确认对话框
             */
            $("#restore-confirm-dialog-id").dialog({
                autoOpen : false,
                width : 300,
                modal : true,
                resizable : false,
                title: /*[[#{recycle.restore.confirm.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var fileUuid = $(this).data('fileUuid');
                            restoreFileConfirm(fileUuid);
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            })

            /**
             * 彻底删除确认对话框
             */
            $("#delete-permanently-confirm-id").dialog({
                autoOpen : false,
                width : 300,
                modal : true,
                resizable : false,
                title: /*[[#{recycle.delete.permanently}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var fileUuid = $(this).data('fileUuid');
                            deletePermanentlyConfirm(fileUuid);
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $(this).dialog("close");
                        }
                    }
                ]
            })

        })//end ready function

        /****yanglanting******/
        function query(){
            var fileName = $("#file-name-id").val()
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"fileName",value:fileName},
                ]
            }).flexReload()
        }
        /****yanglanting******/

        /**
         * 表格查询
         */
        function query(){
            var fileName = $("#file-name-id").val()
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name: "fileName",value: fileName}
                ]
            }).flexReload()
        }

        /**
         * 文件预览
         * @param fileUuid
         * @param fileName
         */
        function preFile(fileUuid,fileName) {
            /**
             * 文档预览
             * @type {RegExp}
             */
            var regDoc = RegExp("^.*docx$")
            if(regDoc.test(fileName)){
                $.ajax({
                        type: 'post',
                        async: false,
                        dataType: 'json',
                        url: /*[[@{/file/getShareUrl}]]*/'',
                        data: [
                            {name: "fileUuid", value: fileUuid}
                        ],
                        success: function (data) {
                            console.info("preFile" + JSON.stringify(data))
                            var url = data['code'];
                            if (url){
                                url = url.replaceAll("%3F","%26")
                                $("#pro-document-iframe-id").attr("src","https://view.xdocin.com/xdoc?_xdoc="+ url)
                            }
                            $("#pre-document-dialog-id").dialog("open")
                        },
                        error: function (msg) {
                            message(/*[[#{common.error}]]*/'');
                        }
                    }
                );
            }
        }

        /**
         * 恢复文件
         */
        function restoreFile(fileUuid) {
            $("#restore-confirm-dialog-id").data('fileUuid', fileUuid).dialog('open');
        }

        /**
         * 确认恢复文件
         */
        function restoreFileConfirm(fileUuid) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: /*[[@{/file/restoreFromRecycle}]]*/'',
                data: [{name: "fileUuid", value: fileUuid}],
                success: function(data) {
                    message(data.msg);
                    if(data.success) {
                        query();
                    }
                },
                error: function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        /**
         * 彻底删除文件
         */
        function deletePermanently(fileUuid) {
            $("#delete-permanently-confirm-id").data('fileUuid', fileUuid).dialog('open');
        }

        /**
         * 确认彻底删除
         */
        function deletePermanentlyConfirm(fileUuid) {
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: /*[[@{/file/deletePermanently}]]*/'',
                data: [{name: "fileUuid", value: fileUuid}],
                success: function(data) {
                    message(data.msg);
                    if(data.success) {
                        query();
                    }
                },
                error: function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        /**
         * 批量删除
         */
        function batchDelete() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length === 0){
                message(/*[[#{common.empty}]]*/'');
                return;
            }

            $("#delete-permanently-confirm-id").data('fileUuid', ids.join(',')).dialog('open');
        }

        /**
         * 批量恢复
         */
        function batchRestore() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length === 0){
                message(/*[[#{common.empty}]]*/'');
                return;
            }

            $("#restore-confirm-dialog-id").data('fileUuid', ids.join(',')).dialog('open');
        }

    </script>
    <style>

        a.hidden{
            display: none;
        }

        #file-paste-num-id{
            color: #ff0000;
        }
    </style>
</head>

<body>

<header>
    <input id="file-name-id" th:placeholder="#{file.name.plc}" >

    <a href="#" class="btn-info btn" onclick="query()">
        <i class="glyphicon glyphicon-search"></i>
        <span th:text="#{common.query}"></span>
    </a>

    <a href="#" class="btn-info btn" onclick="batchRestore()">
        <i class="glyphicon glyphicon-repeat"></i>
        <span th:text="#{recycle.restore}"></span>
    </a>

    <a href="#" class="btn-info btn" onclick="batchDelete()">
        <i class="glyphicon glyphicon-trash"></i>
        <span th:text="#{recycle.delete.permanently}"></span>
    </a>

</header>

<table id="flexigrid-id"></table>

<div id="pre-document-dialog-id" style="display: none">
    <iframe id="pro-document-iframe-id" style="width: 100%;height: 400px">
    </iframe>
</div>

<!-- 恢复确认对话框 -->
<div id="restore-confirm-dialog-id" style="display: none">
    <p th:text="#{recycle.restore.confirm}">确认恢复选中文件？</p>
</div>

<!-- 彻底删除确认对话框 -->
<div id="delete-permanently-confirm-id" style="display: none">
    <p th:text="#{recycle.delete.confirm.permanently}">确认彻底删除选中文件？此操作不可恢复！</p>
</div>

</body>
</html>